<template>
  <div class="item" :class="RaceStatus === -1 ? 'unPublic' : RaceStatus === 0 ? 'begin' : 'end'"
    @dblclick="handlerToDetail(props.item.id)">
    <div class="left">
      <img class="img" v-if="props.item.format == 0" src="@/assets/images/acm_logo.png" alt="" />
      <img class="img" v-if="props.item.format == 1" src="@/assets/images/oi_logo.png" alt="" />
      <img class="img" v-if="props.item.format == 2" src="@/assets/images/ioi_logo.png" alt="" />
      <img class="img" v-if="props.item.format == 3" src="@/assets/images/tianti_logo.png" alt="" />
    </div>
    <div class="mid">
      <div class="top">
        <n-ellipsis style="max-width: 240px">
          <span class="title" @click="handlerToDetail(props.item.id)">{{
            props.item.title
          }}</span>
        </n-ellipsis>
      </div>
      <div class="bottom">
        <div class="b-left">
          <div class="start-time text">
            <i class="iconfont icon-rili"></i>
            开始时间:{{ props.item.startTime || "xxxx-xx-xx" }} 结束时间:{{
              props.item.endTime || "xxxx-xx-xx"
            }}
            &emsp13;
            <span class="text2">
              <i class="iconfont icon-shijian"></i>{{ getDuration(props.item.duration) || "0" }}
            </span>
          </div>
          <div class="reg-start-time text" v-show="props.item.type == 1">
            <i class="iconfont icon-rili"></i>
            报名时间:{{ props.item.regStartTime || "xxxx-xx-xx" }} 报名结束:{{
              props.item.regEndTime || "xxxx-xx-xx"
            }}
          </div>
          <div class="reg-start-time text" v-show="props.item.type == 0">
            报名时间: 无需报名
          </div>
        </div>
      </div>
    </div>
    <div class="midRight">
      <div class="tags">
        <n-button class="btn" size="tiny" round type="warning">
          <i class="iconfont icon-bisai"></i>
          <span class="text" v-show="props.item.format == 0">ACM</span>
          <span class="text" v-show="props.item.format == 1">OI</span>
          <span class="text" v-show="props.item.format == 2">IOI</span>
          <span class="text" v-show="props.item.format == 3">天梯</span>
        </n-button>
      </div>
      <div class="tags">
        <n-button class="btn" size="tiny" round type="success" v-show="props.item.type == 1">
          <i class="iconfont icon-tuandui"></i>团队赛
        </n-button>
        <n-button class="btn" size="tiny" round type="error" v-show="props.item.type == 0">
          <i class="iconfont icon-zuozhe"></i>个人赛
        </n-button>
      </div>
      <div class="tags">
        <n-button class="btn" size="tiny" round type="success" strong secondary v-show="props.item.auth == 0">
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">公开赛</span>
        </n-button>
        <n-button class="btn" size="tiny" round type="error" strong secondary v-show="props.item.auth == 1">
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">私有赛</span>
        </n-button>
        <n-button class="btn" size="tiny" round type="warning" strong secondary v-show="props.item.auth == 2">
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">保护赛</span>
        </n-button>
      </div>
    </div>
    <div class="right">
      <span class="status" v-show="RaceStatus == -1">未 开 始</span>
      <span class="status" v-show="RaceStatus == 0">进 行 中</span>
      <span class="status" v-show="RaceStatus == 1">已 结 束</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()

const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
})
onMounted(() => {
  initStatus()
})
/**
 * 比赛状态
 * 0进行中
 * 1已结束
 * -1未开始
 */
const RaceStatus = ref(0)
const getDuration = (duration) => {
  if (Math.floor(duration / 60) < 60) {
    return (duration / 60).toFixed(1) + "分钟"
  }
  if (Math.floor(duration / 60 / 60) < 24) {
    return (duration / 60 / 60).toFixed(1) + "小时"
  }
  return (duration / 60 / 60 / 24).toFixed(0) + "天"
}

const handlerToDetail = (id) => {
  localStorage.removeItem("raceTab")
  localStorage.removeItem(`${id}ShowStar`)
  localStorage.removeItem(`${id}ShowAuto`)
  router.push({
    path: `/home/race-detail/${id}`,
  })
}
const initStatus = () => {
  const now = Date.now()
  const start = Date.parse(props.item.startTime)
  const end = Date.parse(props.item.endTime)
  if (now - start < 0) {
    RaceStatus.value = -1
    return
  }
  if (now - end > 0) {
    RaceStatus.value = 1
    return
  }
  RaceStatus.value = 0
}
</script>

<style lang="less" scoped>
.item {
  width: 99%;
  height: 100px;
  margin: 0 auto 20px auto;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  display: flex;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1), 0 2px 8px rgba(0, 10, 32, 0.05);
  position: relative;
  cursor: pointer;

  .left {
    width: 14%;
    height: 80%;
    display: flex;
    margin: auto 0;
    border-radius: 8px;
    margin-right: 1rem;
    .img {
      width: 85%;
      height: 85%;
      margin: auto;
    }
  }

  .mid {
    display: flex;
    flex-direction: column;

    .top {
      margin: auto 0 0 0;

      .title {
        font-size: 22px;
        font-weight: 550;
      }
    }

    .bottom {
      font-size: 12px;
      color: #888;
      margin: 0 0 5px 0;
      display: flex;

      .b-left {
        display: flex;
        flex-direction: column;

        .text {
          margin: auto 0;
          height: 20px;
        }

        .text2 {
          margin: auto 0;
          height: 20px;
          color: #555;
        }
      }

      .b-mid {
        display: flex;
        flex-direction: column;
        margin: auto 7px;
      }

      .b-right {}
    }
  }

  .midRight {
    width: 7%;
    height: 100%;
    margin: auto 0 auto auto;
    display: flex;
    flex-direction: column;

    .tags {
      margin: auto 0;
      display: flex;
      height: 33%;

      .btn {
        margin: auto;
        font-weight: 600;
        width: 90%;

        .text {
          font-weight: 600;
        }
      }
    }
  }

  .right {
    width: 3%;
    height: 100%;
    margin: auto 0 auto 0;
    display: flex;

    .status {
      margin: auto;
      color: white;
      word-spacing: 5px;
      writing-mode: vertical-rl;
      text-align: center;
    }
  }
}

.unPublic {
  // border-color: rgba(60, 128, 242, 0.8);

  .right {
    // background-color: rgba(60, 128, 242);
  }

  .icon-rili,
  .icon-shijian {
    color: rgb(132, 187, 255);
  }
}

.begin {
  // border-color: rgba(233, 160, 23, 0.8);

  .right {
    background-color: rgba(233, 160, 23);
  }

  .icon-rili,
  .icon-shijian {
    color: rgba(233, 160, 23);
  }
}

.end {
  // border-color: rgba(199, 53, 83, 0.8);  

  .right {
    background-color: rgba(199, 53, 83);
  }

  .icon-rili,
  .icon-shijian {
    color: rgba(199, 53, 83);
  }
}
</style>
